<template>
  <div class="user-messages">
    <h1>信息</h1>
    <ul>
      <li v-for="message in paginatedMessages" :key="message.id">
        {{ message.content }}
      </li>
    </ul>
    <el-pagination
        :page-size="pageSize"
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="currentPage"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>

const messages = [
  { id: 0, content: '您的话费余额不足...' },
  { id: 1, content: '您的话费余额还有...' },
  { id: 2, content: '您的余额还有' },
  { id: 3, content: '已更改地址' },
  { id: 4, content: '录取通知书...' },
  { id: 5, content: '获得java比赛一等奖...' },
  { id: 6, content: '下学期需要学...' },
  { id: 7, content: '四级英语可以开始报名...' },
  { id: 8, content: '您好...' },
  { id: 9, content: 'java蓝桥杯可以缴费...' },
  { id: 10, content: 'java蓝桥杯明天开始比赛...' },
  { id: 11, content: '请做好准备...' },
  // 添加更多假数据...
]

import { ref, computed } from 'vue';

const currentPage = ref(1);
const pageSize = 5;

function handleCurrentChange(val) {
  currentPage.value = val;
}

const total = messages.length;

const paginatedMessages = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  const end = currentPage.value * pageSize;
  return messages.slice(start, end);
});



</script>

<style>
.user-messages {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
}

.user-messages h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

.user-messages ul {
  list-style-type: none;
  padding: 0;
}

.user-messages li {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f2f2f2;
  border-radius: 5px;
}

.user-messages li:hover {
  background-color: #e0e0e0;
}
</style>
